<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>家庭信息注册</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>
	<script language="javascript" src="/gradesign/js/jquery1.12.4.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=LoGzWGFHG3tLBKXRffGTPt5TMLzBXPrn"></script>
    <style type="text/css">
        body{
            background-image: linear-gradient(180deg, rgba(27,31,35,0.065), rgba(27,31,35,0)) !important;
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .main{width: 50% !important;align-content: center;margin-left: 25%;}
        .main-header{text-align: center;margin-top: 50px}
        .lead{font-size: 20px;font-weight: 300;color: #586069}
        .steps{display: table;width: 100%;text-align:center;padding:0px;margin-left: 60px; overflow: hidden;float: left; position: relative;list-style:none;}
        .steps li{float: left;list-style:none;border:1px solid #dfe2e5;border-radius:5px;padding-left:15px;padding-right:47px;padding-top:8px;padding-bottom: 8px;width: 68%;margin-left: 6%;}
        .step{font-size: 20px;font-weight: 300;color: #586069}
        .form-group {margin: 10px 60px}
        .form-label{text-align: left !important;}
        .form-reg{border:solid 1px #d8dee2;margin-left: 15.5%;margin-top:100px;border-radius:5px;margin-right: 65px;width:68%;}
        .form-footer{margin-bottom: 40px}
    </style>
</head>
<body>
    <div class="main" id="main">
            <div class="main-header">
                <div class="join-tip">
                    <h1>加入家庭记账管理系统</h1>
                    <p class="lead">随时随地随心地准确记账，放心舒心安心地管理财务</p>
                </div>
            </div>
            <div class="main-setup setup-org">
                <ol class="steps" >
                    <li class="current">
                            <svg t="1513834285561" class="icon" style="color: #00a7d0" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4381" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35">
                                <defs><style type="text/css"  ></style></defs>
                                <path style="fill:#6666ff;fill-rule:nonzero;" d="M1007.133225 504.308982 511.72545 52.850914 17.4231 503.218006c-9.88742 8.785606-9.88742 29.658647-1.101813 39.538841 8.785606 9.88742 29.662259 9.88742 39.549679 1.101813L511.72545 129.743033l455.858096 416.308417c4.396416 4.400028 12.091046 6.592817 21.964016 6.592817 7.694631 0 13.182022-2.192789 17.58205-7.683793C1017.017032 535.073054 1015.915219 513.105426 1007.133225 504.308982L1007.133225 504.308982zM825.890355 543.855048l0 367.98397-181.253708 0 0-266.931433-265.818782 0 0 266.931433L197.564157 911.839018 197.564157 543.855048c0-30.753235-59.310068-30.753235-59.310068 0l0 427.29765 298.775644 0 0-268.022409 149.395047 0 0 268.022409 298.779256 0L885.204036 543.855048C885.204036 513.105426 825.890355 513.105426 825.890355 543.855048L825.890355 543.855048zM687.477316 175.871079l143.90043 0 0 127.420193c0 31.855048 48.331673 31.855048 48.331673 0L879.709419 128.641219l-191.126677 0c-13.182022 0-24.171255 9.88742-24.171255 24.160418C663.320511 165.983659 674.298906 175.871079 687.477316 175.871079z" p-id="4382">
                                </path>
                            </svg>
                            <strong class="step"></strong>创建家庭账号
                    </li>
                </ol>
            </div>
            <div class="form-reg" id="form-reg-home">
                <table id="reg-home">
                    <div class="form-group form-title">
                        <label class="form-label">家庭信息创建</label>
                    </div>
                    <div class="form-group">
                        <input type="text" name="familyaccount" id="familyaccount" class="form-control"  placeholder="家庭账户"/>
                        <div  class="familyaccount-error" style="display: none ;color: #CE0000;" >
                            <span for="familyaccount" id="familyaccount-error"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" name="familyname" id="familyname" class="form-control"  placeholder="家庭名称"/>
                        <div  class="familyname-error" style="display: none ;color: #CE0000;" >
                            <span for="familyname" id="familyname-error"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="password" name="familypassword" id="familypassword" class="form-control"  placeholder="家庭账户密码"/>
                        <div  class="familypassword-error" style="display: none ;color: #CE0000;" >
                            <span for="familypassword" id="familypassword-error"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="password" name="refamilypassword" id="refamilypassword" class="form-control"  placeholder="重复家庭账户密码"/>
                        <div  class="refamilypassword-error" style="display: none ;color: #CE0000;" >
                            <span for="refamilypassword" id="refamilypassword-error"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="email" name="familyeamil" id="familyeamil" class="form-control"  placeholder="家庭邮箱"/>
                        <!-- <div  class="refamilypassword-error" style="display: none ;color: #CE0000;" >
                            <span for="refamilypassword" id="refamilypassword-error"></span>
                        </div> -->
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-large f4 btn-block  btn-submit" onclick="regFamily()">家庭账户注册</button>
                    </div>
                    <div class="form-group form-footer">
                        <span class="reg-home-tip"><a href="/gradesign/login/login">已有家庭账户，去登陆</a> </span>
                    </div>
                </table>
            </div>
    </div>
    <div class="foot"></div>
</body>
<script type="text/javascript">
	var address = "";
	$(function(){
		//获取用户当前经纬度
    	var gc = new BMap.Geocoder();
    	var geolocation = new BMap.Geolocation();
    	geolocation.getCurrentPosition(function(r){
    		if(this.getStatus() == BMAP_STATUS_SUCCESS){
    			address = r.point.lng+","+r.point.lat;
    		}
    	});
	});
    function verify(){
    	var flag = true;
        //保证数据唯一，家庭账户不能重复
        //空警告
        if(document.getElementById("familyaccount").value==""){
            $(".familyaccount-error").show();
            document.getElementById("familyaccount-error").innerText="家庭账户不能为空";
            flag = false;
        }
        if(document.getElementById("familyname").value==""){
            $(".familyname-error").show();
            document.getElementById("familyname-error").innerText="家庭名称不能为空";
            flag = false;
        }
        if(document.getElementById("familypassword").value==""){
            $(".familypassword-error").show();
            document.getElementById("familypassword-error").innerText="家庭账户密码不能为空";
            flag = false;
        }
        if(document.getElementById("refamilypassword").value==""){
            $(".refamilypassword-error").show();
            document.getElementById("refamilypassword-error").innerText="重复家庭账户密码不能为空";
            flag = false;
        }
        //密码和重复密码一致
        if(document.getElementById("familypassword").value!=document.getElementById("refamilypassword").value){
            $(".refamilypassword-error").show();
            document.getElementById("refamilypassword-error").innerText="重复家庭账户密码与家庭账户密码不一致";
            return flag;
        }
        return flag;
    }
    
    function regFamily() {
    		//数据校验
            if(verify()){
            	var param = {};
            	param.familyaccount = $("#familyaccount")[0].value;
            	param.familyname = $("#familyname")[0].value;
            	param.familypassword = $("#familypassword")[0].value;
            	param.familyeamil = $("#familyeamil")[0].value;
            	debugger;
            	param.address = address;
                //传值到后台
                $.ajax({
                	url : "/gradesign/family/register",
                	method : "post",
                	data : param,
                	dataType:"json",
                	success : function(data){
                		if(data.result=="success"){
                			alert("注册成功");
                			window.location.href="/gradesign/login";
                		}
                	},
                	error : function(){
                		alert("注册失败");
                	}
                });
            }else{
            	alert("注册失败");
            };
    	}
    function checkFamilyaccount(){
    	var param = {};
    	param.familyaccount = $("#familyaccount")[0].value;
    	$.ajax({
    		url : "/gradesign/family/checkfamilyaccount",
    		data : param,
    		method : "post",
    		dataType : "json",
    		success : function(data){
    			if(data.result=="exist"){
    				$(".familyaccount-error").show();
    	            document.getElementById("familyaccount-error").innerText="该家庭账户已存在";
    	            return false;
    			}else if(data.result=="empty"){
    				return true;
    			}
    		},
    		error : function(){
    			alert("系统错误！");
    		}
    	});
    }
    document.getElementById("familyaccount").onblur=function(){
    	checkFamilyaccount();
    }
    //onchange事件
    document.getElementById("familyaccount").onchange=function () {
        $(".familyaccount-error").hide();
    }
    document.getElementById("familyname").onchange=function () {
        $(".familyname-error").hide();
    }
    document.getElementById("familypassword").onchange=function () {
        $(".familypassword-error").hide();
    }
    document.getElementById("refamilypassword").onchange=function () {
        $(".refamilypassword-error").hide();
    }
</script>
</html>